<template>
  <div class="app-container">
    <el-card>
      <title-line title="评价内容" />
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="100px">
        <el-row>
          <el-col :lg="12" :xl="10">
            <el-form-item label="商品质量：" prop="goodsQualityStar">
              <el-rate v-model="formData.goodsQualityStar" style="margin-top: 6px" />
            </el-form-item>
            <el-form-item label="评价标签：">
              <div class="tags-list flex items-center flex-wrap">
                <template v-if="tagList.length">
                  <el-tag
                    v-for="item in tagList"
                    :key="item.id"
                    class="tags-item text-cursor ml-10 mb-10"
                    :effect="item.checked ? 'dark' : 'plain'"
                    type="danger"
                    @click="tagClick(item.id)"
                    >{{ item.name }}</el-tag
                  >
                </template>
                <template v-else>
                  <span class="ft-12">暂无内容</span>
                  <el-button class="ml-10" type="text" @click="addTags">去新增</el-button>
                </template>
              </div>
            </el-form-item>
            <el-form-item label="评价内容：" prop="content">
              <el-input
                v-model.trim="formData.content"
                placeholder="请输入评价内容"
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 8 }"
              />
            </el-form-item>
            <el-form-item label="评价图片：">
              <UploadImage
                :isShowTip="true"
                :file-type="['jpg', 'png', 'jpeg']"
                file-pixel="60*60"
                :file-size="1"
                :limit="3"
                :multiple="true"
                :response-fn="handleResponse"
                v-model="formData.images"
              />
            </el-form-item>
            <el-form-item label="物流服务：" prop="expressServiceStar">
              <el-rate v-model="formData.expressServiceStar" style="margin-top: 6px" />
            </el-form-item>
            <el-form-item label="客服态度：" prop="customerServiceStar">
              <el-rate v-model="formData.customerServiceStar" style="margin-top: 6px" />
            </el-form-item>
            <el-form-item label="评论排序：" prop="sort">
              <el-input v-model="formData.sort" placeholder="请输入评价排序（1-9999）" />
              <p class="ft-12" style="color: #999999">分类排序数字越大越靠前</p>
            </el-form-item>
            <el-form-item label="推荐状态" prop="isRecommend">
              <el-radio-group v-model="formData.isRecommend">
                <el-radio v-for="(item, index) in RECOMMMEND" :key="index" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="text-center">
              <el-button @click="resetForm">取消</el-button>
              <el-button @click="submitForm" type="primary">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { RECOMMMEND } from '@/enum'
import rules from './rules'
export default {
  name: 'AppraiseDetail',
  data() {
    return {
      formData: {
        goodsQualityStar: 0,
        labelIds: [],
        content: '',
        images: [],
        expressServiceStar: 0,
        customerServiceStar: 0,
        isRecommend: false,
        sort: 99
      },
      tagList: [],
      checkedNum: 0
    }
  },
  computed: {
    rules() {
      return rules
    },
    RECOMMMEND() {
      return RECOMMMEND
    },
    id() {
      return this.$route.query?.id
    }
  },
  created() {
    this.getTagSelectList()
    this.getGoodsCommentDetail()
  },
  methods: {
    handleResponse(response) {
      return response
    },
    // 获取评价标签列表
    async getTagSelectList() {
      const { data } = await this.$http.order.tagApi.getTagSelectList()
      this.tagList = data.map(item => {
        return { ...item, checked: false }
      })
    },
    // 获取评论详情
    async getGoodsCommentDetail() {
      if (!this.id) return
      const { data } = await this.$http.order.appraiseApi.getGoodsCommentDetail(this.id)
      for (const key in data) {
        this.formData[key] = data[key]
      }
      const tagIds = this.formData.labelIds
      // 选中标签数量
      this.checkedNum = tagIds?.length
      // 回显选中标签
      this.tagList = this.tagList.map(item => {
        item.checked = tagIds.some(ele => ele == item.id)
        return item
      })
    },
    // 去新增标签
    addTags() {
      this.$router.push({ name: 'OrderTags' })
    },
    // 标签选择
    tagClick(id) {
      if (this.checkedNum >= 3) return this.$message.error('最多选择3个标签！')
      this.tagList = this.tagList.map(item => {
        if (item.id === id) {
          item.checked = !item.checked
        }
        return item
      })
      this.checkedNum = this.tagList.filter(ele => ele.checked)?.length
    },
    // 提交修改
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        const params = {
          id: this.id,
          ...this.formData
        }
        let ids = this.tagList.filter(ele => ele.checked).map(ele => ele.id)
        params.labelIds = ids
        const { status, msg } = await this.$http.order.appraiseApi.editGoodsComment(params)
        if (status === 200) {
          this.$message.success('编辑成功！')
          this.$router.back(-1)
        } else {
          this.$message.error(msg)
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.tags-list {
  .tags-item {
    &.active {
      background: #fc4541;
    }
  }
}
</style>
